<script>

import KtTableSaveOfTypeIsDatetime from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsDatetime.vue";
import KtTableSaveOfTypeIsImg
  from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsImg.vue";
import KtTableSaveOfTypeIsEnum
  from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsEnum.vue";
import KtTableSaveOfTypeIsText
  from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsText.vue";

export default {
  components: {KtTableSaveOfTypeIsText, KtTableSaveOfTypeIsEnum, KtTableSaveOfTypeIsImg, KtTableSaveOfTypeIsDatetime},
  props:{
    columns:{
      type: Array,
      default: []
    },
    requestUri: {
      type: String,
      default: ''
    },
    projectCode:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      form: {},
      layout: 'vertical',
      parentId: ''
    }
  },
  methods: {
    getHasSaveColumn(columns){
      let hasSaveColumn = [];
      for(let column of columns){
        if(column?.isId||!column?.isAdd){
          continue;
        }
        hasSaveColumn.push(column);
      }
      return hasSaveColumn;
    },
    formChange(column,value){
      console.log(column.field+":"+value);
      // 如果是对象的话，需要使用
      let split = column.field.split('.');
      if(split.length>0){
        for(let i=0;i<split.length-1;i++){
          eval(`this.form.${split[i]} = {}`);
        }
      }

      eval(`this.form.${column.field} = value`);
    },
    getSaveRequestUrl(){
      return this.requestUri+"/save";
    },
    handleOk() {
      // element-plus中的loading
      const loading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$kt.request.send({
        uri: this.getSaveRequestUrl(),
        method: 'POST',
        data: {
          ...this.form,
          parentId: this.parentId,
          projectCode: this.projectCode
        },
        stateSuccess: (res) => {
          loading.close();
          this.$message.success(res.msg);
          this.close();
          this.$emit('saveSuccess', this.form);
        },
        stateFail: (res) => {
          loading.close();
          this.$message.error(res.errMsg);

        }
      });
    },
    handleCancel() {
      this.$emit('cancel')
    },
    open(from){
      if(from){
        this.form = this.$kt.util.deepCopy(from);
        this.visible = true;
        return;
      }
      this.form = {
        name: "",
        fileIdOfIcon: "",
        parentId: "",
      };
      this.visible = true;
    },

    close() {
      this.visible = false;
    },
    chooseImg() {
// 选择文件
      this.$kt.file.chooseImageOne().then(res => {
        this.loading = true;
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        // 上传这个文件
        this.$kt.request.uploadFile({
          file: res.file,
          // 这个是文件组编码
          groupCode: "goodsTypeIcon",
          stateSuccess: async (res) => {
            this.form.fileIdOfIcon = res.data.id;
            this.loading = false;
            loading.close();
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            this.loading = false;
            loading.close();
          }
        });
      });
    }
  }
}

</script>

<template>
  <div>
    <a-modal
        title="保存类型"
        v-model:visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <el-form :form="form" :layout="layout" label-position="top">
        <el-scrollbar style="height: calc(100vh - 300px);min-height: 300px;">
                <el-form-item label="图标">
                    <el-image
                        @click="chooseImg"
                        :src="$kt.file.visit(form.fileIdOfIcon)" style="width: 100px;height: 100px;cursor: pointer;"></el-image>
                </el-form-item>
                <el-form-item label="名称">
                  <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>

        </el-scrollbar>
      </el-form>
    </a-modal>
  </div>
</template>

<style scoped>

</style>